<template>
  <a-drawer
    placement="right"
    :closable="false"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    width="100%"
    :getContainer="false"
    :title="title"
  >
    <div ref="print" v-if="visible">
      <div id="print">
        <div style="width: 1000px; overflow: hidden">
          <div class="details" style="overflow: hidden">
            <div class="Listdetails" v-for="(item, index) in subList" :key="index + item.Id" ref="Listdetails">
              <h1 class="mantop">{{ item.AreaName }}/{{ item.RackName }}</h1>
              <h1>编号:{{ item.Code }}</h1>

              <div :ref="'listQrcode'" id="qrcode" class="DDDD"></div>
              <h1 class="manbutton">{{ item.ProjectName }}</h1>
              <a-row style="margin-top: 10px"></a-row>

              <div class="clear" style="clear：both"></div>
            </div>
          </div>
        </div>
      </div>

      <div
        :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 9999,
          title: '',
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
        <a-button type="primary" @click="print">打印</a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      QrCode: '',
      loading: false,
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      subList: [],
      title: '',
    }
  },
  methods: {
    print() {
      const subOutputRankPrint = document.getElementById('print')
      const newstr = subOutputRankPrint.innerHTML
      document.body.innerHTML = newstr
      window.print()
      window.location.reload()
    },
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        // correctLevel: QRCode.CorrectLevel.H
      })
      console.log(ar)
    },
    creatQrCodenew(qText, div) {
      var qrcode = new QRCode(div, {
        text: qText,
        width:400,
        height: 400,
        colorDark: '#000000',
        colorLight: '#ffffff',
      })
    },

    async getDataList() {
      console.log(this.$refs['listQrcode'])
      console.log(this.subList)
      await this.$nextTick(() => {
        this.subList.forEach((item, index) => {
          this.creatQrCodenew(item.QrCode, this.$refs['listQrcode'][index])

          console.log(index)
        })
      })
    },
    async openDrawer(id, title) {
      this.title = title
      this.visible = true
      this.subList = []
      await this.$http.post('/PB/PB_Location/Selectid?ID=' + id).then((res) => {
        console.log(res.Data)
        if (res.Data.length > 0) {
          res.Data.forEach((item) => {
            console.log()
            let a = item.RackName.indexOf('虚')
            if (a != -1) {
              let arr = item.RackName.split('虚')
              item.RackName = arr.join('')
            }
          })
        }
        this.subList = res.Data
        this.getDataList()
      })
    },
    onDrawerClose() {
      this.visible = false
    },
  },
}
</script>

<style scoped>
* {
  font-family: 微软雅黑;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.barcode {
  display: block;
  width: 19.625rem;
  height: 6.25rem;
  margin-left: 2%;
}

/* .production-title{
	width: 55%;
	float: left;
	margin-left: 5%;
} */
.production-title li {
  width: 50%;
  line-height: 3.125rem;

  margin: 0 0px;
}
.production-title li label {
  margin-right: 20px;
}
.details {
  width: 1100px;
  /* display: flex; */
  box-sizing: border-box;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  padding: 0 2%;
}
.qrcode {
  width: 101px;
  height: 101px;

  border: 1px solid #000;
}
.qrcode img {
}
.maiqrcode {
  width: 101px;
  height: 101px;
  margin-right: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}
.Listdetails {
  width: 950px;
  height: 1457px;
  padding-top: 200px;
  box-sizing: border-box;

  text-align: center;
}

.detacode label {
  margin-right: 4%;
  margin-top: 10%;
  font-size: 18px;
}
.mantop {
  margin-top: 100px;
}
.listQrcode {
  text-align: center;
}
.Listable {
  width: 98%;
  margin-left: 2%;
}
.Listable tr td {
  line-height: 3.125rem;
  font-size: 0.875rem;
}
.Print {
  position: fixed;
  bottom: 10%;
  right: 5%;
}
/* 444444444 */
#print td {
  line-height: 26px;
}
.listQrcode {
  width: 200px;
  height: 200px;
  /* border: 1px solid #000; */
}
.qr {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  height: 20px;
}
.detacode {
  margin-top: 1%;

  height: 100px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 5px;
}
.rowprint {
  /* font-size: 18px; */
  font-size: 12px;
  box-sizing: border-box;
  line-height: 20px;
  padding: 0 4%;
}
.rowprint span {
  font-size: 14px;
  font-weight: bold;
}
#print ul li {
  /* font-size: 18px; */
}
h1 {
  font-size: 80px;
}
.DDDD {
  display: flex;
  justify-content: center;
}
.manbutton {
  margin-top: 100px;
}
</style>
